<template>
  <div class="index-container">
    <header>
      <img src="/src/assets/logo_zh.png" />
      <el-link @click.prevent="logout">{{ $t("main.logout") }}</el-link>
    </header>
    <article>
      <section class="bd-menu">
        <ul class="nav top-menu">
          <li>
            <el-link>
              <el-icon>
                <Star />
              </el-icon>
              <span>{{ $t("menu.systemManager") }}</span>
            </el-link>

            <ul class="nav">
              <li class="second-menu">
                <el-link href="/index/user">
                  <el-icon>
                    <User />
                  </el-icon>
                  <span>{{ $t("menu.userPage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/role">
                  <el-icon>
                    <Discount />
                  </el-icon>
                  <span>{{ $t("menu.rolePage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/post">
                  <el-icon>
                    <RefreshRight />
                  </el-icon>
                  <span>{{ $t("menu.configPage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/department">
                  <el-icon>
                    <Warning />
                  </el-icon>
                  <span>{{ $t("menu.logPage") }}</span>
                </el-link>
              </li>
            </ul>
          </li>

          <li>
            <el-link>
              <el-icon>
                <Notebook />
              </el-icon>
              <span>{{ $t("menu.serviceManager") }}</span>
            </el-link>

            <ul class="nav">
              <li class="second-menu" >
                <el-link href="/index/student">
                  <el-icon>
                    <PieChart />
                  </el-icon>
                  <span>{{ $t("menu.studentPage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/teacher">
                  <el-icon>
                    <Crop />
                  </el-icon>
                  <span>{{ $t("menu.teachPage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/course">
                  <el-icon>
                    <Memo />
                  </el-icon>
                  <span>{{ $t("menu.coursePage") }}</span>
                </el-link>
              </li>

              <li class="second-menu">
                <el-link href="/index/class">
                  <el-icon>
                    <menu />
                  </el-icon>
                  <span>{{ $t("menu.classPage") }}</span>
                </el-link>
              </li>
            </ul>
          </li>
        </ul>
      </section>
      <section class="bd-contents">
        <router-view></router-view>
      </section>
    </article>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import router from "../route";
import $ from "jquery";
const msg = ref("主页面");
const logout = () => {
  sessionStorage.setItem("userUuid", "");
  router.push({ path: "/login" });
};
onMounted(() => {
  $(`.second-menu > a[href='${location.pathname}']`).addClass("active");
});
</script>
<style scoped>
.index-container {
  width: 100%;
  height: 100%;
}

header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

article {
  flex-grow: 1;
  display: flex;
  width: 100%;
}

article > .bd-menu {
  flex-basis: 150px;
  padding-top: 30px;
}

article > .bd-contents {
  flex-grow: 1;
}

.second-menu {
  padding-left: 20px !important;
}

ul.top-menu > li > a > span > i > svg,
ul.top-menu > li > a > span > span {
  font-weight: 800;
  color: rgb(5, 81, 81);
}

.active {
  background-color: blanchedalmond;
}
</style>
